<template>
  <div class="container">
    <el-card
      style="
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 600px;
        text-align: center;
        position: absolute;
        top: 36%;
        left: 40%;
        background-color: darkcyan;
      "
    >
      <template #header>
        <div class="card-header">
          <el-icon style="position: relative; top: 2px"><Histogram /></el-icon>
          <span>千锋后台管理系统</span>
        </div>
      </template>
      <div style="display: flex; flex-direction: column; gap: 1.3337vw">
        <div>
          <el-icon style="position: relative; top: 2px"><User /></el-icon> 账号：
          <el-input v-model="username" style="width: 240px" placeholder="孩子输账号" />
        </div>
        <div>
          <el-icon style="position: relative; top: 2px"><Lock /></el-icon>
          密码：
          <el-input
            type="password"
            v-model="password"
            style="width: 240px"
            placeholder="密码你知道吗"
          />
        </div>
        <div>
          <el-button style="background-color: darkgreen" @click="btn()">登录</el-button>
        </div>
      </div>

      <template #footer>拼搏到无能为力，坚持到感动自己</template>
    </el-card>
  </div>
</template>
<script>
import router from '@/router'
import { loginReq } from '../stores/https'

export default {
  methods: {
    btn() {
      loginReq(this.username, this.password)
        .then((r) => {
          console.log(r.data)
          localStorage.setItem('token', r.data.token)
          const token = localStorage.getItem('token')
          if (token) {
            localStorage.setItem('token', token)
            localStorage.setItem('user', JSON.stringify(r.data.user))
            alert(r.data.message)
            router.push({ path: '/' })
          } else {
            console.error('No token found in response')
          }
        })
        .catch((error) => {
          console.log(error)
        })
    }
  },
  data() {
    return {
      username: '',
      password: ''
    }
  }
}
</script>
<style lang="css">
.container {
  background: url('https://file.tuguow.com/image/20190419/15556664818478361.jpg') no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}
</style>
